<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }

        /* 选择article的后代且该元素在自己的兄弟中是老大 */
        /* article.a1 :nth-child(1){
            color: red;
        } */
        /* 选择article的后代且的序列奇数元素 */
        /* article.a1 :nth-child(odd){
            color: blue;
        } */
        /* 选择article的后代且的序列偶数元素 */
        /* article.a1 :nth-child(even){
            color: yellowgreen;
        } */
        /* n>=0的整数 ，选择第三个到最后一个*/
        /* article.a1 :nth-child(n+3){
            color: tomato;
        } */
        /* article.a1 :nth-child(2n){
            color: violet;
        } */
        /* article.a1 :nth-child(2n+1){
            color: violet;
        } */
        /* 1.4.7 */
        /* div :nth-child(odd) {
            height: 20px;
            background-color: rgb(231, 231, 231);
        } */

        /* div :nth-child(even) {
            height: 20px;
            background-color: rgb(170, 170, 170);
        } */
        div section:not(:nth-child(2)) {
            border: 1px solid red;
            height: 50px;
        }

        .box1 {
            width: 500px;
        }

        /* .a2的后代在该元素的兄弟中是倒数第二个 */
        /* .a2 :nth-last-child(2){
            color: tomato;
        } */
        /* .a2 div:first-of-type{
        } */
        /* .a2 div:nth-of-type(2){
            color: red;
        }
        .a2 p:nth-last-of-type(2){
            color: red;
        } */
        /* 选择html标签，优先级高于html */
        /* :root{
            background-color: rgb(231, 164, 164);
        }
        html{
            background-color: rgb(196, 226, 168);
        } */
        input:read-only {
            background-color: rgb(202, 171, 171);
        }

        /* input:read-write {
            background-color: rgb(117, 189, 70);
        } */

        input:checked+label {
            color: red;
        }

        input:default+label {
            color: blue;
            font-weight: bold;
        }

        ::selection {
            background-color: rgb(173, 38, 38);
            color: white;
        }

        /*设置滚动条*/
        body::-webkit-scrollbar {
            width: 10px;
        }

        /*设置滚动条拇指元素*/
        body::-webkit-scrollbar-thumb:vertical {
            border-radius: 5px;
            background: #10a724;
        }

        /*设置滚动条背景元素*/
        body::-webkit-scrollbar-track-piece:vertical {
            border-radius: 5px;
            background: #d43d3d;
        }
        input{
            color: orangered;
        }
        input::-webkit-input-placeholder{
            color: palegreen;
        }
    </style>
</head>

<body>
    <article class="a1">
        <p>独坐幽篁里</p>
        <p>弹琴复长啸</p>
        <p>深林人不知</p>
        <p>明月来相照</p>
        <p>独坐幽篁里</p>
        <p>弹琴复长啸</p>
        <p>深林人不知</p>
        <p>明月来相照</p>
    </article>
    <div class="box1">
        <!-- 块级元素默认高度0，默认宽度是父系元素内容的100% -->
        <!-- 行内块级元素默认高度0，默认宽度0 -->
        <section></section>
        <section>排除</section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </div>
    <article class="a2">
        <p>独坐幽篁里</p>
        <div>弹琴复长啸 div1</div>
        <p>深林人不知</p>
        <div>明月来相照 div2</div>
        <p>独坐幽篁里</p>
        <p>弹琴复长啸</p>
        <p>深林人不知</p>
        <div>明月来相照 div3</div>
        <p>明月来相照</p>
    </article>
    <form action="">
        <input type="text" value="马玉"><br>
        <input type="text" value="阿里巴巴" readonly><br>
        <input type="text" placeholder="请输入你的用户名">
        <div>
            <label for="">性别:</label><br>
            <input type="radio" id="seceret" name="gender" checked>
            <label for="seceret">保密</label>
            <input type="radio" id="male" name="gender">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender">
            <label for="female">女</label>
        </div>
    </form>
</body>

</html>